<template>
	<view class="follow-card">
		<image class="card-img" :src="cardDetail.cover_image" mode="scaleToFill">
			<view class="card-img-mask"></view>
			<view class="card-img-status" v-if="cardDetail.isEnd">已完结</view>
		</image>

		<view class="card-title">{{ cardDetail.script_name }}</view>

		<view class="card-subtitle">观看至第{{ cardDetail.current_episode }}集</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	// - props
	const props = defineProps({
		cardDetail: {
			type: Object,
			required: true
		}
	});
</script>

<style lang="scss">
	.follow-card {
		width: 100%;
		height: 100%;

		.card-img {
			position: relative;
			width: 100%;
			height: 310rpx;
			border-radius: 11rpx;

			.card-img-mask {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				box-shadow: inset 0 -40rpx 20rpx 5rpx rgba(0, 0, 0, 0.3);
			}

			.card-img-status {
				position: absolute;
				right: 10rpx;
				bottom: 15rpx;
				font-size: 22rpx;
				color: #ffffff;
			}
		}
		.card-title {
			font-size: 26rpx;
			font-weight: 600;
			color: #ffffff;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-top: 7rpx;
		}
		.card-subtitle {
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;
			margin-top: 10rpx;
		}
	}
</style>
